<template>
  <div>
    <div class="text">发生防治情况</div>
    <el-card>
      <el-tabs v-model="activeName">
        <!-- 预防期（防治历）  -->
        <el-tab-pane label="预防期（防治历）" name="second">
          <el-form inline :model="pages">
            <el-form-item label="有害生物：">
              <el-input v-model="pages.pest" @input="dataChange" />
            </el-form-item>
            <el-form-item label="月份：">
              <el-date-picker v-model="pages.start_month" type="date" placeholder="选择日期" style="width: 100%" />
            </el-form-item>
            <el-button type="primary" icon="el-icon-edit" @click="addList">添加记录</el-button>
          </el-form>
          <el-table :data="userList" style="width: 100%" stripe border height="45vh">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="region" label="区域" />
            <el-table-column prop="pest" label="有害生物" />
            <el-table-column prop="generation" label="世代" />
            <el-table-column prop="insect_state" label="虫态" />
            <el-table-column prop="start_month" label="月份" />
            <el-table-column prop="extent" label="定性定量（轻中重）" width="150" />
            <el-table-column prop="measure" label="防治措施" width="500" />
            <el-table-column prop="point" label="防治要点" width="300" />
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="{ row }">
                <el-link type="primary" @click="editList(row)">修改</el-link>
                <el-link type="danger" @click="deleList(row)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="pages.page"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="pages.listRows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <!-- 发生防治表 -->
        <el-tab-pane label="发生防治表" name="first">
          <prevention-child />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加逻辑对话框 -->
    <el-dialog title="添加预防期" :visible.sync="dialogVisible" width="40%" @close="addClose">
      <el-form ref="form" :model="addFrom" label-width="80px">
        <div class="dia">
          <div class="diaBox1">
            <el-form-item label="区域:">
              <el-input v-model="addFrom.region" />
            </el-form-item>
            <el-form-item label="世代:">
              <el-select v-model="addFrom.generation" placeholder="起始">
                <el-option label="0" value="0" />
                <el-option label="1" value="1" />
              </el-select>
            </el-form-item>
            <div class="addBox">
              <el-form-item label="月份:">
                <div class="box">
                  <el-select v-model="addFrom.start_month" placeholder="起始">
                    <el-option v-for="(item, index) in times" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-select v-model="addFrom.end_month" placeholder="结束">
                    <el-option v-for="(item, index) in times" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="时间:">
                <div class="box">
                  <el-select v-model="addFrom.start_period" placeholder="起始">
                    <el-option v-for="(item, index) in times2" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-select v-model="addFrom.end_period" placeholder="结束">
                    <el-option v-for="(item, index) in times2" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="diaBox2">
            <el-form-item label="有害生物:">
              <el-input v-model="addFrom.pest" />
            </el-form-item>
            <el-form-item label="虫态：">
              <el-input v-model="addFrom.insect_state" />
            </el-form-item>
            <el-form-item label="定性定量:">
              <el-input v-model="addFrom.extent" />
            </el-form-item>
          </div>
        </div>
        <el-form-item label="防治措施:" class="area">
          <el-input v-model="addFrom.measures" type="textarea" placeholder="请输入防治措施" />
        </el-form-item>
        <el-form-item label="防治要点:" class="area">
          <el-input v-model="addFrom.point" type="textarea" placeholder="请输入防治要点" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determineAdd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改预防期 -->
    <el-dialog title="修改预防期" :visible.sync="editdialog" width="40%" @close="editClose">
      <el-form ref="editform" :model="editFrom" label-width="80px">
        <div class="dia">
          <div class="diaBox1">
            <el-form-item label="区域:">
              <el-input v-model="editFrom.region" />
            </el-form-item>
            <el-form-item label="世代:">
              <el-input v-model.number="editFrom.generation" placeholder="数字" />
            </el-form-item>
            <div class="addBox">
              <el-form-item label="月份:">
                <div class="box">
                  <el-select v-model="editFrom.start_month" placeholder="起始">
                    <el-option v-for="(item, index) in times" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-select v-model="editFrom.end_month" placeholder="结束">
                    <el-option v-for="(item, index) in times" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="时间:">
                <div class="box">
                  <el-select v-model="editFrom.start_period" placeholder="起始">
                    <el-option v-for="(item, index) in times2" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-select v-model="editFrom.end_period" placeholder="结束">
                    <el-option v-for="(item, index) in times2" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="diaBox2">
            <el-form-item label="有害生物:">
              <el-input v-model="editFrom.pest" />
            </el-form-item>
            <el-form-item label="虫态：">
              <el-input v-model="editFrom.insect_state" />
            </el-form-item>
            <el-form-item label="定性定量:">
              <el-input v-model="editFrom.extent" />
            </el-form-item>
          </div>
        </div>
        <el-form-item label="防治措施:" class="area">
          <el-input v-model="editFrom.measure" type="textarea" placeholder="请输入防治措施" />
        </el-form-item>
        <el-form-item label="防治要点:" class="area">
          <el-input v-model="editFrom.point" type="textarea" placeholder="请输入防治要点" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialog = false">取 消</el-button>
        <el-button type="primary" @click="editrmine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  preventionApi,
  addListApi,
  editListAPI
} from '@/api/PreventionAndCure'
import preventionChild from './components/preventionChild.vue'
export default {
  components: { preventionChild },
  data() {
    return {
      // 对话开关
      dialogVisible: false,
      editdialog: false,
      // 导航分页处理
      activeName: 'second',
      // 主页数据
      userList: [],
      // 月份数据
      times: [
        { label: '一月', value: 1 },
        { label: '二月', value: 2 },
        { label: '三月', value: 3 },
        { label: '四月', value: 4 },
        { label: '五月', value: 5 },
        { label: '六月', value: 6 },
        { label: '七月', value: 7 },
        { label: '八月', value: 8 },
        { label: '九月', value: 9 },
        { label: '十月', value: 10 },
        { label: '十一月', value: 11 },
        { label: '十二月', value: 12 }
      ],
      times2: [
        { label: '全月', value: 0 },
        { label: '上旬', value: 1 },
        { label: '中旬', value: 2 },
        { label: '下旬', value: 3 }
      ],
      // 添加数据
      addFrom: {
        id: 0,
        // 区域
        region: '',
        // 世代
        generation: '',
        // 月份
        start_month: null,
        end_month: null,
        // 时间
        start_period: null,
        end_period: null,
        // 有害生物
        pest: '',
        // 虫态
        insect_state: '',
        // 定性定量
        extent: '',
        // 防治措施
        measure: '',
        // 防治要点
        point: ''
      },
      // 修改数据
      editFrom: {
        id: 0,
        // 区域
        region: '',
        // 世代
        generation: '',
        // 月份
        start_month: null,
        end_month: null,
        // 时间
        start_period: null,
        end_period: null,
        // 有害生物
        pest: '',
        // 虫态
        insect_state: '',
        // 定性定量
        extent: '',
        // 防治措施
        measure: '',
        // 防治要点
        point: ''
      },
      // 筛选数据
      pages: {
        page: 1,
        listRows: 10,
        start_month: '',
        end_month: '',
        pest: ''
      },
      // 分页请求
      total: null
    }
  },

  async created() {
    this.gitList()
  },
  methods: {
    async gitList() {
      const res = await preventionApi(this.pages)
      // console.log(res)
      this.userList = res.data
      this.total = res.count - 0
    },
    // 筛选
    dataChange() {
      this.gitList()
    },
    // 分页数据方法
    handleSizeChange(newSize) {
      this.pages.page = newSize
      this.gitList()
    },
    handleCurrentChange(newNum) {
      this.pages.listRows = newNum
      this.gitList()
    },
    // 添加逻辑
    addList() {
      this.dialogVisible = true
      this.addFrom.id = 0
    },
    // 确定添加/编辑
    async determineAdd() {
      // await addListApi(this.addFrom)
      // this.gitList()
      console.log(this.addFrom)
      // this.dialogVisible = false
      // this.addFrom = {}
      // this.$message.success('添加成功！')
    },
    // 修改对话框
    editList(row) {
      this.editdialog = true
      this.editFrom.id = row.id
      this.editFrom.region = row.region
      this.editFrom.generation = row.generation
      this.editFrom.generation = row.generation
      this.editFrom.end_month = row.end_month
      this.editFrom.start_period = row.start_period
      this.editFrom.end_period = row.end_period
      this.editFrom.pest = row.pest
      this.editFrom.insect_state = row.insect_state
      this.editFrom.extent = row.extent
      this.editFrom.measures = row.measures
      this.editFrom.point = row.point
    },
    // 确认修改
    async editrmine() {
      await addListApi(this.editFrom)
      this.gitList()
      this.editdialog = false
      this.$message.success('修改成功！')
    },
    // 删除对话框
    async deleList(row) {
      const prve = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      this.dialogVisible = false
      await editListAPI({ id: row.id })
      this.gitList()
      this.$message.success('删除成功!')
    },
    // 弹框关闭事件
    addClose() {
      this.$refs.form.resetFields()
    },
    editClose() {
      this.editFrom = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.text {
  height: 60px;
  font-size: 20px;
  margin-left: 10px;
  color: #888;
  margin-right: 20px;
  font-weight: 500;
  font-size: 22px;
  line-height: 60px;
  margin-left: 20px;
}

.el-form-item {
  width: 280px;
}

.el-link {
  margin-right: 10px;
}

.addBox {
  .el-input {
    width: 100px;
  }

  .el-select {
    width: 100px;
  }
}

.area {
  width: 90%;
}

.dia {
  display: flex;
  justify-content: space-between;

  .diaBox1 {
    width: 50%;
  }

  .diaBox2 {
    width: 50%;
  }
}

.el-pagination {
  margin-top: 20px;
}
.el-card{
  height: 100%;
}
</style>
